<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebScoket</title>
</head>

<body>
    欢迎使用websocket服务<br />
    <input id="text" type="text" /><button style="margin-left: 10px;" onclick="sendText()">发送</button> 
    <button onclick="closeWebSocket()">关闭</button>
    <div id="message">
    </div>
</body>

<script type="text/javascript">
    let lock = false;      // 避免ws重复连接
    let ws = null;         // 定义连接属性
    let count = 0;         // 标记重连次数
    let user_uuid = "28"

    initWebSocket();

    function initWebSocket() {
        // 浏览器提供了WebSocket类型，在Firefox中为MozWebSocket
        if (window.WebSocket || window.MozWebSocket) {
            conn()
        } else {
            console.log("浏览器不支持websocket")
        }
    }
    function conn() {
        //可以看到客户端JS，很容易的就通过WebSocket函数建立了一个与服务器的连接sock，当握手成功后，会触发WebScoket对象的onopen事件，告诉客户端连接已经成功建立。客户端一共绑定了四个事件。
        ws = new WebSocket("ws://127.0.0.1:8081/ws?grpId=130&uid="+user_uuid);
        // 收到消息后触发
        ws.onmessage = function (e) {
            count = 0;
            setMessageInnerHTML(e.data)
        };
        //建立连接后触发
        ws.onopen = function () {
            let obj = {
                from_user: user_uuid,
                to_user: user_uuid,
                grp_id:"0",
                content:"ping"
            };
            obj = JSON.stringify(obj);
            ws.send(obj);
        };
        // 关闭连接时候触发
        ws.onclose = function (e) {
            reconnect()
            console.log('关闭websocket连接！')
        };
        //发生错误的时候触发
        ws.onerror = function (e) {
            reconnect()
        }
    }

    // 每隔1秒重连
    function reconnect() {
        if (lock) return;
        lock = true;
        setTimeout(function () {       // 没连接上会一直重连，设置延迟避免请求过多
            lock = false;
            if (count < 5) {          // 重连50次后还没有连上，则关闭websocket
                initWebSocket();
            } else {
                count = 0;
            }
            count++
        }, 1000)
    }

    function sendText(){
        var message = document.getElementById('text').value;
        send(message)
    }

    // 发送websocket消息
    function send(msg) {
        let obj = {
            from_user: user_uuid,
            to_user:"",
            grp_id:"120",
            content:msg,
            content_type:1
        };
        obj = JSON.stringify(obj);
        ws.send(obj);
    }

    function closeWebSocket(){
        ws.close();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }
</script>

</html>